<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="mak.twitterSentiment.classes.TweetBean" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="tweets_style.css">
<script type="text/javascript">
	function validateForm(){
		var labels = document.getElementsByName("label");
		var words = document.getElementsByName("word");
		var polarities = document.getElementsByName("polarity");
		var flag1 = false;
		var flag2 = false;
		for(var i=0; i<labels.length; i++){
			if((labels[i].value != "")&&(words[i].value != "")){
				flag1 = true;
			}
		}
		for(i=0; i<polarities.length; i++){
			if(polarities[i].value != ""){
				flag2 = true;
			}
		}
		if((flag1 == false)&&(flag2 == false)){
			alert("Please enter at least one pair of label-word or one pair of part of speech - polarity to improve the system");
			return false;
		}
		return true;
	}
</script>
<title>#Sentiment</title>
</head>
<body>
	<jsp:useBean id="beans" type="java.util.ArrayList<mak.twitterSentiment.classes.TweetBean>" scope="request" />
	<form action='TrainServlet' method='post' onsubmit="return validateForm();">
		<div class="mastHead">
			<div class="centerContentTop">
			<h1>Twitter Sentiment Analysis for the keyword: <span style="color: #666">"${sessionScope.termInJSP}"</span></h1>
			<!-- <div class="mode">
			Training mode:
			<input type="radio" name="mode" value="words">Providing both words and labels</input>
			<input type="radio" name="mode" value="nowords">Providing only labels</input>
			</div> -->
			<input type="submit" value="" class="improveButton" />
			</div>
		</div>
	<div class="centerContent">
		<c:forEach var="bean" items="${beans}">
				<div class="wrapper">
					<div class="container">
						<div class="${bean.class1}">
							Predicted: ${bean.pred}!
						</div>
						<div class="${bean.class2}">
							<img class="lilbirdie" src="lilbirdie.png" />
							${bean.text}
						</div>
						<div class="prediction_container">
							<div class="predictionbasedon">
							This prediction is based on the attributes: 
								<c:forEach var="feature" items="${bean.features}">
									${feature}
								</c:forEach>
							</div>
							<div class="predictioncorrected">
								Is this tweet misclassified? If yes, please enter the correct ones below and click the button on the right side of your screen
							</div>
							<div class="inputscontainer">
								<label class="labelword">Label:</label><input type="text" name="label" class="inputword" placeholder="Enter the correct label..."/>
								<label class="labelword">Word:</label><input class="inputword" type="text" name="word" placeholder="Enter the correct word..."/>
							</div>
							<c:forEach var="feature" items="${bean.features}">
								<input type="text" name="stem" value="${feature}" style="display:none" />
							</c:forEach>
							<c:forEach var="pos" items="${bean.parts_of_speech}">
									<div class="stemInfo">
										<label class="labelword">Part of Speech:</label><input type="text" name="pos" value="${pos}" class="inputword"/>
										<label class="labelword">Polarity:</label>
										<select name="polarity" class="polarity"> 
											<option value=""></option>
											<option value="positive">Positive</option>
  											<option value="negative">Negative</option>
  											<option value="neutral">Neutral</option>
  										</select>
									</div>
							</c:forEach>
						</div>
					</div>
				</div>
		</c:forEach>
	</div>
	</form>
</body>
</html>